<template>
  <div>
    <van-nav-bar
      title="首页"
      left-text="返回"
      left-arrow
      @click="$router.go(-1)"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img
          :src="'http://localhost:3000' + item.img"
          style="width: 100%; height: 150px"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
          class="gridImg"
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          class="gridImg"
          src="https://img01.yzcdn.cn/vant/apple-2.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          class="gridImg"
          src="https://img01.yzcdn.cn/vant/apple-3.jpg"
        />
      </van-grid-item>
    </van-grid>
    <!--标签页 -->
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
          v-for="(item, index) in hotList1"
          :key="index"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
          <template #footer>
            <van-button type="primary" size="mini">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="发现新品">
        <van-card
          v-for="(item, index) in hotList2"
          :key="index"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
          <template #footer>
            <van-button type="primary" size="mini">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          v-for="(item, index) in hotList3"
          :key="index"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
          <template #footer>
            <van-button type="primary" size="mini">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>
·
<script>
import { getBannerList, getindexDoods } from "../request";
export default {
  data() {
    return {
      imgList: [],
      hotList1: [],
      hotList2: [],
      hotList3: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      // let res = await getBannerList();
      // this.imgList = res;
      this.imgList = await getBannerList();

      let hotList = await getindexDoods();
      this.hotList1 = hotList[0].content;
      this.hotList2 = hotList[1].content;
      this.hotList3 = hotList[2].content;
    },
  },
};
</script>

<style>
/* 宫格 */
.gridImg {
  width: 100%;
  height: 70px;
}
/* 标签页 */
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>